import {
  GithubOutlined,
  QuestionCircleOutlined,
  WeiboOutlined,
  ZhihuOutlined,
} from "@ant-design/icons";
import classnames from "classnames";
// import { withPrefix } from "gatsby";
import omit from "omit.js";
import { default as RCFooter, FooterProps as RcFooterProps } from "rc-footer";
import "rc-footer/assets/index.less";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
//@ts-ignore
import styles from "./Footer.module.less";

export const OLD_SITE_DOMAIN = "https://antv-2018.alipay.com";

interface FooterProps extends RcFooterProps {
  rootDomain?: string;
  language?: string;
  githubUrl?: string;
  location: Location;
}

const withPrefix = (str) => str;
const Footer: React.FC<FooterProps> = ({
  columns,
  bottom,
  theme = "dark",
  language,
  rootDomain = "",
  location,
  ...restProps
}) => {
  const [withMenu, setWithMenu] = useState<boolean>(false);
  const { t, i18n } = useTranslation();
  const lang = language || i18n.language;

  useEffect(() => {
    // 有 menu 的模版 footer 表现不同，通过 location 判断加载的模版
    const pathPrefix = withPrefix("/").replace(/\/$/, "");
    const path = window.location.pathname.replace(pathPrefix, "");
    const isExamplePage =
      path.startsWith(`/zh/examples`) || path.startsWith(`/en/examples`);
    const isDocsPage =
      path.startsWith(`/zh/docs`) || path.startsWith(`/en/docs`);
    // examples 页面里目前只有 gallery 是有 footer 的，
    // 且 gallery 会出现 `location.key = 'initial'` 逻辑，所以先统一处理为需要 menu
    if (isExamplePage) {
      setWithMenu(true);
    } else if (isDocsPage) {
      // 文档页为 404 时 footer 没有 menu
      setWithMenu(!((location as any).key === "initial"));
    } else {
      setWithMenu(false);
    }
  }, [location]);

  const getColums = () => {
    // 如果外部没有传入 columns，则默认展示 antv footer
    const col1 = {
      title: t("Resources"),
      items: [
        {
          title: "Ant Design",
          url: "https://ant.design",
          openExternal: true,
        },
        {
          title: "Ant Design Mobile",
          url: "https://mobile.ant.design",
          openExternal: true,
        },
        {
          title: "Umi",
          description: t("React 应用开发框架"),
          url: "https://umijs.org",
          openExternal: true,
        },
        {
          title: "Dumi",
          description: t("组件/文档研发工具"),
          url: "https://d.umijs.org",
          openExternal: true,
        },
        {
          title: "ahooks",
          description: t("React Hooks 库"),
          url: "https://github.com/alibaba/hooks",
          openExternal: true,
        },
        {
          title: t("国内镜像"),
          url: "https://antv.gitee.io/",
        },
      ],
    };

    const col2 = {
      title: t("社区"),
      items: [
        {
          icon: <ZhihuOutlined style={{ color: "#0084ff" }} />,
          title: t("体验科技专栏"),
          url: "http://zhuanlan.zhihu.com/xtech",
          openExternal: true,
        },
        {
          icon: (
            <img
              src="https://gw.alipayobjects.com/zos/rmsportal/mZBWtboYbnMkTBaRIuWQ.png"
              alt="seeconf"
            />
          ),
          title: "SEE Conf",
          description: t("蚂蚁体验科技大会"),
          url: "https://seeconf.antfin.com/",
          openExternal: true,
        },
      ],
    };

    const col3 = {
      title: t("帮助"),
      items: [
        {
          icon: <GithubOutlined />,
          title: "GitHub",
          url: "https://github.com/antvis",
          openExternal: true,
        },
        {
          icon: <QuestionCircleOutlined />,
          title: t("StackOverflow"),
          url: "http://stackoverflow.com/questions/tagged/antv",
          openExternal: true,
        },
      ],
    };

    const more = {
      icon: (
        <img
          src="https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg"
          alt="more products"
        />
      ),
      title: t("更多产品"),
      items: [
        {
          icon: (
            <img
              src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
              alt="Ant Design"
            />
          ),
          title: "Ant Design",
          url: "https://ant.design",
          description: t("企业级 UI 设计语言"),
          openExternal: true,
        },
        {
          icon: (
            <img
              src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg"
              alt="yuque"
            />
          ),
          title: t("语雀"),
          url: "https://yuque.com",
          description: t("知识创作与分享工具"),
          openExternal: true,
        },
        {
          icon: (
            <img
              src="https://gw.alipayobjects.com/zos/antfincdn/v2%24rh7lqpu/82f338dd-b0a6-41bc-9a86-58aaa9df217b.png"
              alt="Egg"
            />
          ),
          title: "Egg",
          url: "https://eggjs.org",
          description: t("企业级 Node 开发框架"),
          openExternal: true,
        },
        {
          icon: (
            <img
              src="https://gw.alipayobjects.com/zos/rmsportal/DMDOlAUhmktLyEODCMBR.ico"
              alt="kitchen"
            />
          ),
          title: "Kitchen",
          description: t("Sketch 工具集"),
          url: "https://kitchen.alipay.com",
          openExternal: true,
        },
        {
          icon: (
            <img
              src="https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg"
              alt="xtech"
            />
          ),
          title: t("蚂蚁体验科技"),
          url: "https://xtech.antfin.com/",
          openExternal: true,
        },
      ],
    };

    return [col1, col2, col3, more];
  };

  return (
    <RCFooter
      maxColumnsPerRow={5}
      theme={theme}
      columns={columns || getColums()}
      className={classnames(styles.footer, {
        [styles.withMenu]: withMenu,
      })}
      bottom={
        bottom || (
          <>
            <div className={styles.bottom}>
              <div>
                <a
                  href="https://weibo.com/antv2017"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <WeiboOutlined />
                </a>
                <a
                  href="https://zhuanlan.zhihu.com/aiux-antv"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <ZhihuOutlined />
                </a>
                <a
                  href="https://github.com/antvis"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <GithubOutlined />
                </a>
                <a href={`${rootDomain}/${lang}/about`}>{t("关于我们")}</a>
                <a
                  href={OLD_SITE_DOMAIN}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {t("返回旧版")}
                </a>
              </div>
              <div>
                © {new Date().getFullYear()} Made with ❤ by{" "}
                <a href="https://xtech.antfin.com/">XTech</a>
              </div>
            </div>
          </>
        )
      }
      {...omit(restProps, ["githubUrl"])}
    />
  );
};

export default Footer;
